<template>
	<view>
		<view style="background-color: white;">
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				<view style="padding: 20rpx;">
					<u-form-item label="开户名称" prop="name" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.name"/>
					</u-form-item>
					<u-form-item label="开户行" prop="bank" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.bank"/>
					</u-form-item>
					<u-form-item label="银行账号" prop="num" :labelWidth="labelWidth" required labelPosition="left" :borderBottom="true">
						<input placeholder="请输入" v-model="info.num"/>
					</u-form-item>
					<u-form-item label="预留手机号" prop="mobile" :labelWidth="labelWidth" required labelPosition="left" >
						<input placeholder="请输入" v-model="info.mobile"/>
					</u-form-item>
			</view>
			</u--form>
			</view>	
				<view class="bottom"><view class="btn2 row-center">保存</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth:120,
				info:{
					name:'',
					bank:'',
					num:'',
					mobile:'',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入开户名称',
						trigger: ['blur', 'change']
					},
					'bank': {
						type: 'string',
						required: true,
						message: '请输入开户行',
						trigger: ['blur', 'change']
					},
					'num': {
						type: 'string',
						required: true,
						message: '请输入银行账号',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入预留手机',
						trigger: ['blur', 'change']
					},
					}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.bottom{
		width: 100%;
		padding: 36rpx;
		background-color: white;
		bottom: 0;
		position: fixed;
		.btn2{
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			background: #347FFF;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
	}
</style>
